<template>
    <view>
        <view class="page">
            <comp-common v-bind="{data:data}"></comp-common>
            <comp-header v-bind="{data:data}"></comp-header>
            <view :class="['body','after-navber',  data.fixed?'fixed-tab-'+data.tab:'']">
                <view class="header-h flex-y-bottom">
                    <image class="header-bg" :src="data.shop.header_bg" mode="aspectFill"></image>
                    <view class="flex flex-row">
                        <view class="flex-grow-0 flex-y-center" style="padding: 0 24upx;font-size: 0">
                            <image :src="data.shop.logo" style="width: 90upx;height: 90upx;border-radius: 8upx"></image>
                        </view>
                        <view class="flex-grow-1 flex-y-center header-text">
                            <view>
                                <view class="shop-name" style="width: 520upx; margin-bottom: 4upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">{{data.shop.name}}
                                </view>
                                <view style="font-size: 8pt">
                                    <text style="margin-right: 30upx">商品：{{data.shop.goods_num}}</text>
                                    <text v-if="data.__is_sales">已售：{{data.shop.sale_num}}</text>
                                </view>
                            </view>
                            <view @click="kfuStart" style="text-align:center" v-if="data.cs_icon">
                                <image src="../../static/store/shop-kf.png" style="width: 40upx;height: 40upx;"></image>
                                <view style="font-size:10pt;">客服</view>
                            </view>
                        </view>
                        <view class="flex-grow-0 flex-y-center">
                            <view class="flex flex-row favorite" style="display: none">
                                <view class="flex-y-center">
                                    <image src="../../static/store/icon-shoucang.png" style="width: 34upx;height: 28upx;"></image>
                                </view>
                                <view class="flex-y-center flex-x-center favorite-text">收藏</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="tab flex flex-row">
                    <navigator :class="['tab-item','flex-grow-1', 'flex-y-center',' flex-x-center',data.tab==1?'active':'' ]"
                        openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=1'">
                        <view>
                            <image :src="data.tab==1?'../../static/store/icon-shouye-active.png':'../../static/store/icon-shouye.png'"></image>
                            <view>店铺首页</view>
                        </view>
                    </navigator>
                    <navigator :class="['tab-item','flex-grow-1', 'flex-y-center',' flex-x-center',data.tab==2?'active':'' ]"
                        openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2'">
                        <view>
                            <image :src="data.tab==2?'../../static/store/icon-quanbu-active.png':'../../static/store/icon-quanbu.png'"></image>
                            <view>全部商品</view>
                        </view>
                    </navigator>
                    <navigator :class="['tab-item','flex-grow-1', 'flex-y-center',' flex-x-center',data.tab==3?'active':'' ]"
                        openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=3'">
                        <view>
                            <image :src="data.tab==3?'../../static/store/icon-xinpin-active.png':'../../static/store/icon-xinpin.png'"></image>
                            <view>新品上架</view>
                        </view>
                    </navigator>
                    <navigator class="tab-item flex-grow-1 flex-y-center flex-x-center " :class="data.tab==4?'active':''"
                        openType="redirect" :url="'../../store/shop-summary/shop-summary?store_id='+data.store_id">
                        <view>
                            <image src="../../static/store/icon-summary.png"></image>
                            <view>店铺简介</view>
                        </view>
                    </navigator>
                </view>
                <block v-if="data.tab==1">
                    <scroll-view class="shop-coupon-list" scrollX="true" v-if="data.coupon_list&&data.coupon_list.length">
                        <view class="flex flex-row">
                            <view class="flex-grow-0 shop-coupon-item" v-for="(citem,cindex) in data.coupon_list" :key="citem.id">
                                <!-- <image src="/store__wxapp_img.coupon.coupon.url"></image> -->
                                <view class="flex flex-row">
                                    <view class="flex-grow-1">
                                        <view class="shop-coupon-money">
                                            <text style="font-size: 7pt">￥</text> 20000.00
                                        </view>
                                        <view class="shop-coupon-limit">满20000.00可使用</view>
                                    </view>
                                    <view class="flex-grow-0 flex-y-center get-shop-coupon-now">立即领取</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <navigator style="width: 100%;height: auto;font-size: 0" v-if="data.banner_list&&data.banner_list.length">
                        <image style="width: 100%;height: 300upx;background-color: #ccc"></image>
                    </navigator>
                    <view class="list-block" v-if="data.hot_list&&data.hot_list.length">
                        <view class="block-header">热销推荐</view>
                        <view class="block-list">
                            <navigator class="block-item" :url="'/pages/goods/goods?id='+hitem.id" v-for="(hitem,hindex) in data.hot_list"
                                :key="hitem.id">
                                <view style="font-size: 0">
                                    <image :src="hitem.cover_pic"></image>
                                </view>
                                <view class="item-name">{{hitem.name}}</view>
                                <view class="item-price">￥{{hitem.price}}</view>
                            </navigator>
                        </view>
                    </view>
                </block>
                <view class="list-block" v-if="data.tab==2">
                    <view class="block-header flex flex-row fixed-header list-header">
                        <navigator class="flex-grow-1 flex flex-row flex-x-center flex-y-center " :class="data.sort==0?'active':''"
                            :url="'/store/shop-cat/shop-cat?store_id='+data.store_id+'&cat_id='+data.cat_id">
                            <view>分类</view>
                            <view style="font-size: 0">
                                <image src="../../static/store/icon-fenlei.png" style="width: 30upx;height: 24upx"></image>
                            </view>
                        </navigator>
                        <navigator class="flex-grow-1 flex-x-center flex-y-center " :class="data.sort==1?'active':''"
                            openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2&sort=1'">综合
                        </navigator>
                        <navigator class="flex-grow-1 flex-x-center flex-y-center " :class="data.sort==2?'active':''"
                            openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2&sort=2'">销量
                        </navigator>
                        <navigator class="flex-grow-1 flex-x-center flex-y-center" openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2&sort=3'"
                            v-if="data.sort<3">
                            <view>价格</view>
                            <view style="font-size: 0">
                                <image src="../../static/store/icon-jiage-1.png" style="width: 16upx;height: 26upx"></image>
                            </view>
                        </navigator>
                        <navigator class="flex-grow-1 flex-x-center flex-y-center active" openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2&sort=4'"
                            v-if="data.sort==3">
                            <view>价格</view>
                            <view style="font-size: 0">
                                <image src="../../static/store/icon-jiage-2.png" style="width: 16upx;height: 26upx"></image>
                            </view>
                        </navigator>
                        <navigator class="flex-grow-1 flex-x-center flex-y-center active" openType="redirect" :url="'../../store/shop/shop?store_id='+data.store_id+'&tab=2&sort=3'"
                            v-if="data.sort==4">
                            <view>价格</view>
                            <view style="font-size: 0">
                                <image src="../../static/store/icon-jiage-3.png" style="width: 16upx;height: 26upx"></image>
                            </view>
                        </navigator>
                    </view>
                    <view class="block-list">
                        <navigator class="block-item" :url="'/pages/goods/goods?id='+gitem.id" v-for="(gitem,gindex) in data.goods_list"
                            :key="gitem.id">
                            <view style="font-size: 0">
                                <image :src="gitem.cover_pic"></image>
                            </view>
                            <view class="item-name">{{gitem.name}}</view>
                            <view class="item-price">￥{{gitem.price}}</view>
                        </navigator>
                    </view>
                </view>
                <block v-if="data.tab==3">
                    <block v-if="data.new_list&&data.new_list.length">
                        <view class="list-block" v-for="(new_item,newindex) in data.new_list" :key="new_item.id">
                            <view class="new-goods-header flex flex-row">
                                <view class="flex-grow-1 flex-y-center">
                                    <view></view>
                                </view>
                                <view class="flex-grow-0">{{new_item.date}}</view>
                                <view class="flex-grow-1 flex-y-center">
                                    <view></view>
                                </view>
                            </view>
                            <view class="block-list">
                                <navigator class="block-item" :url="'/pages/goods/goods?id='+item.id" v-for="(nitem,nindex) in data.new_item.list"
                                    :key="nitem.id">
                                    <view style="font-size: 0">
                                        <image :src="nitem.cover_pic"></image>
                                    </view>
                                    <view class="item-name">{{nitem.name}}</view>
                                    <view class="item-price">￥{{nitem.price}}</view>
                                </navigator>
                            </view>
                        </view>
                    </block>
                </block>
                <view style="text-align: center;padding: 24upx;" v-if="data.no_more">
                    <view style="height: 50upx;line-height: 50upx;font-size: 9pt;color: #888">没有商品了~</view>
                </view>
                <view style="text-align: center;padding: 24upx;" :style="{visibility: data.loading?'visible':'hidden'}"
                    v-if="!data.no_more">
                    <image :src="data.__wxapp_img.system.loading_black.url" style="width: 50upx;height: 50upx"></image>
                </view>
                <view v-if="data.copy">
                    <view class="act-modal show">
                        <view @click="closeActModal" class="act-modal-bg"></view>
                        <view class="act-modal-pic flex-y-center flex-x-center">
                            <view style="position:relative;width:620upx;background:#ffffff;border-radius:16upx;text-align:center">
                                <image @click="kfuEnd" src="../../static/store/shop-x.png" style="position:absolute;right:27upx;top:27upx;width: 35upx;height: 35upx;"></image>
                                <view style="margin:40upx 0;font-size:13pt;color:#353535">联系客服</view>
                                <view style="text-align:left;padding-left:56upx">
                                    <text class="we-name" v-if="data.__platform=='wx'">店家微信: {{data.shop.wechat_name}}</text>
                                    <view style="font-size:12pt;color:#353535">店家电话: {{data.shop.tel}}</view>
                                </view>
                                <view style="text-align:center;padding-bottom:48upx;padding-top:35upx">
                                    <view @click="copyinfo" class="copy-info" :data-info="data.shop.wechat_name">一键复制</view>
                                    <view style="display:inline-block;width:30upx"></view>
                                    <view @click="callPhone" class="copy-info" :data-info="data.shop.tel">拨打电话</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <comp-quick-navigation v-bind="{data:data}"></comp-quick-navigation>
            <comp-footer v-bind="{data:data}"></comp-footer>
        </view>

    </view>
</template>


<script>var myVue = {};
    export default {
        data() {
            return {
                store_id: 1,
                data: {
                    tab: 1,
                    sort: 1,
                    coupon_list: [],
                    copy: !1,
                    store_id: 1,
                    shop: {},
                }
            }
        },
        onLoad: function (t) {myVue = this;
            myVue.getApp.page.onLoad(this, t);
            var a = this;
            if ("undefined" == typeof my) {
                if (t.scene) {
                    var o = decodeURIComponent(t.scene);
                    o && (o = a.getApp.utils.scene_decode(o)).store_id && (t.store_id = o.store_id);
                }
            } else if (null !== a.getApp.query) {
                var e = a.getApp.query;
                a.getApp.query = null, t.store_id = e.store_id;
            }
            a.setData({
                tab: t.tab || 1,
                sort: t.sort || 1,
                store_id: t.store_id || !1,
                cat_id: t.cat_id || ""
            }), a.data.store_id || a.getApp.core.showModal({
                title: "提示",
                content: "店铺不存在！店铺id为空"
            }), setInterval(function () {
                a.onScroll();
            }, 40), this.getShopData();
        },

        methods: {
            quickNavigation: function () {
                var that = this;
                this.setData({
                    quick_icon: !this.data.quick_icon
                });
                this.data.dapp;
								//#ifndef H5
                var t = that.getApp.core.createAnimation({
                    duration: 300,
                    timingFunction: "ease-out"
                });
                this.data.quick_icon ? t.opacity(0).step() : t.translateY(-55).opacity(1).step(),
                    this.setData({
                        animationPlus: t.export()
                    });
										//#endif
            },
            kfuStart: function () {
                this.setData({
                    copy: !0
                });
            },
            kfuEnd: function () {
                this.setData({
                    copy: !1
                });
            },
            copyinfo: function (t) {
                var that = this;
                that.getApp.core.setClipboardData({
                    data: t.target.dataset.info,
                    success: function (t) {
                        that.getApp.core.showToast({
                            title: "复制成功！",
                            icon: "success",
                            duration: 2e3,
                            mask: !0
                        });
                    }
                });
            },
            callPhone: function (t) {
                myVue.getApp.core.makePhoneCall({
                    phoneNumber: t.target.dataset.info
                });
            },
            onScroll: function(t) {
								var o = this;
								myVue.getApp.core.createSelectorQuery().selectViewport(".after-navber").scrollOffset(function(t) {
										var a = 2 == o.data.tab ? 136.5333 : 85.3333;
										t.scrollTop >= a ? o.setData({
												fixed: !0
										}) : o.setData({
												fixed: !1
										});
								});
						},
            getShopData: function () {
                var a = this;
                var o = (a.data.current_page || 0) + 1,
                    e = "shop_data_store_id_" + a.data.store_id,
                    t = a.getApp.core.getStorageSync(e);
                t && a.setData({
                    shop: t.shop
                }), a.getApp.core.showNavigationBarLoading(), a.setData({
                    loading: !0
                }), a.getApp.request({
                    url: a.getApp.api.store.shop,
                    data: {
                        store_id: a.data.store_id,
                        tab: a.data.tab,
                        sort: a.data.sort,
                        page: o,
                        cat_id: a.data.cat_id
                    },
                    success: function (t) {
                        1 != t.code ? 0 == t.code && (a.setData({
                            shop: t.data.shop,
                            coupon_list: t.data.coupon_list,
                            hot_list: t.data.goods_list,
                            goods_list: t.data.goods_list,
                            new_list: t.data.new_list,
                            current_page: o,
                            cs_icon: t.data.shop.cs_icon
                        }), a.getApp.core.setStorageSync(e, t.data)) : a.getApp.core.showModal({
                            title: "提示",
                            content: t.msg,
                            showCancel: !1,
                            success: function (t) {
                                t.confirm && a.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        });
                    },
                    complete: function () {
                        a.getApp.core.hideNavigationBarLoading(), a.setData({
                            loading: !1
                        });
                    }
                });
            },
            getGoodsList: function () {
                var a = this;
                if (3 != a.data.tab && !a.data.loading && !a.data.no_more) {
                    a.setData({
                        loading: !0
                    });
                    var o = (a.data.current_page || 0) + 1;
                    a.getApp.request({
                        url: a.getApp.api.store.shop,
                        data: {
                            store_id: a.data.store_id,
                            tab: a.data.tab,
                            sort: a.data.sort,
                            page: o,
                            cat_id: a.data.cat_id
                        },
                        success: function (t) {
                            0 == t.code && (1 == a.data.tab && (t.data.goods_list && t.data.goods_list.length ?
                                (a.data.hot_list = a.data.hot_list.concat(t.data.goods_list),
                                    a.setData({
                                        hot_list: a.data.hot_list,
                                        current_page: o
                                    })) : a.setData({
                                    no_more: !0
                                })), 2 == a.data.tab && (t.data.goods_list && t.data.goods_list
                                .length ? (a.data.goods_list = a.data.goods_list.concat(t.data.goods_list),
                                    a.setData({
                                        goods_list: a.data.goods_list,
                                        current_page: o
                                    })) : a.setData({
                                    no_more: !0
                                })));
                        },
                        complete: function () {
                            a.setData({
                                loading: !1
                            });
                        }
                    });
                }
            }
        },
        onReady: function () {
            myVue.getApp.page.onReady(this);
        },
        onShow: function () {
            myVue.getApp.page.onShow(this);
        },
        onHide: function () {
            myVue.getApp.page.onHide(this);
        },
        onUnload: function () {
            myVue.getApp.page.onUnload(this);
        },
        onPullDownRefresh: function () {},
        onReachBottom: function () {
            this.getGoodsList();
        },
        onShareAppMessage: function () {
            myVue.getApp.page.onShareAppMessage(this);
            var t = this;
            return {
                path: "/store/shop/shop?user_id=" + myVue.getApp.getUser().id + "&store_id=" + t.data.store_id,
                title: t.data.shop ? t.data.shop.name : "商城首页"
            };
        }




    }
</script>

<style scoped>
    .quick-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        vvisibility: hidden;
        oopacity: 0;
        transition: 200ms;
    }

    .quick-modal.show {
        visibility: visible;
        opacity: 1;
    }

    .quick-modal .quick-modal-bg {
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .quick-modal .quick-modal-pic {
        background: rgba(0, 0, 0, 0.25);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .quick-modal .quick-modal-close image {
        width: 50upx;
        height: 50upx;
        margin-top: 50upx;
    }

    .quick-text {
        color: #ffffff;
        font-size: 9pt;
    }

    .quick-bg {
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        height: 100upx;
        width: 100upx;
    }

    .quick-zfb {
        display: inline;
        opacity: 0;
        position: absolute;
        bottom: 0;
    }

    .quick-icon {
        position: fixed;
        z-index: 20;
        right: 50upx;
        bottom: 140upx;
    }

    .quick-dial {
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        display: block;
        mmargin-bottom: 24upx;
    }

    .float-icon {
        bottom: 170upx !important;
    }

    .device_iphone_x {
        padding-bottom: 65upx;
    }

    .header-h {
        border-bottom: 1upx solid #e3e3e3;
        height: 200upx;
        position: relative;
    }

    .header-h .header-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .header-h>view {
        width: 100%;
        padding-bottom: 24upx;
				z-index: 1;
    }

    .header-text {
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1upx 3upx rgba(0, 0, 0, 0.5);
    }

    .header-h .favorite {
        background: #ff4544;
        color: #fff;
        font-size: 9pt;
        border-radius: 999upx 0 0 999upx;
        height: 64upx;
        padding: 0 20upx;
    }

    .header-h .favorite .favorite-text {
        text-align: center;
        margin-left: 16upx;
    }

    .tab {
        background: #fff;
        font-size: 9pt;
        border-bottom: 1upx solid #e3e3e3;
        height: 120upx;
        overflow: hidden;
    }

    .tab-item {
        text-align: center;
        height: 120upx;
        color: #888;
    }

    .tab-item.active {
        color: #ff4544;
    }

    .tab-item image {
        width: 48upx;
        height: 48upx;
    }

    .fixed-tab-1 .tab,
    .fixed-tab-3 .tab {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }

    .fixed-tab-1.after-navber,
    .fixed-tab-3.after-navber {
        padding-top: 120upx;
    }

    .fixed-tab-2 .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        border-bottom: 1upx solid #e3e3e3;
    }

    .fixed-tab-2.after-navber {
        padding-top: 95upx;
    }

    .shop-coupon-list {
        width: 100%;
        height: 170upx;
        padding: 20upx 24upx;
    }

    .shop-coupon-list>view {
        flex-wrap: nowrap;
    }

    .shop-coupon-list .shop-coupon-item {
        width: 256upx;
        height: 130upx;
        display: inline-block;
        margin-right: 16upx;
        position: relative;
        color: #fff;
    }

    .shop-coupon-list .shop-coupon-item:last-child {
        margin-right: 0;
    }

    .shop-coupon-list .shop-coupon-item image {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .shop-coupon-list .shop-coupon-item>view {
        height: 100%;
    }

    .shop-coupon-list .shop-coupon-item .shop-coupon-money {
        height: 80upx;
        line-height: 80upx;
        width: 200upx;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }

    .shop-coupon-list .shop-coupon-item .shop-coupon-limit {
        height: 50upx;
        line-height: 50upx;
        font-size: 7pt;
        width: 200upx;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }

    .shop-coupon-list .shop-coupon-item .get-shop-coupon-now {
        width: 55upx;
        height: 100%;
        font-size: 7pt;
        word-break: break-all;
        padding: 10upx;
        line-height: 1.25;
        text-align: center;
    }

    .list-block {}

    .list-block .block-header {
        padding: 24upx;
        background: #fff;
    }

    .list-block .block-list {
        width: calc(100% + 8upx);
        margin-left: -7upx;
    }

    .list-block .block-item {
        width: calc(50% - 8upx);
        display: inline-block;
        background: #fff;
        margin-top: 8upx;
        margin-left: 8upx;
    }

    .list-block .block-item image {
        width: 100%;
        height: 360upx;
        margin-bottom: 20upx;
    }

    .list-block .block-item .item-name {
        position: relative;
        margin-bottom: 20upx;
    }

    .list-block .block-item .item-name {
        padding: 0 20upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 32upx;
        line-height: 40upx;
        height: 80upx;
        word-break: break-all;
    }

    .list-block .block-item .item-price {
        color: #ff4544;
        padding: 0 20upx;
        line-height: 1;
        margin-bottom: 20upx;
    }

    .list-header {
        padding: 0 !important;
        height: 90upx;
    }

    .list-header>navigator image {
        width: 24upx;
        height: 24upx;
        margin-left: 12upx;
    }

    .list-header>navigator.active {
        color: #ff4544;
    }

    .new-goods-header {
        margin: 12upx 0;
        color: #888;
        font-size: 9pt;
    }

    .new-goods-header .flex-grow-1 view {
        display: block;
        height: 1upx;
        background: #e3e3e3;
        width: 100%;
        margin: 0 30upx;
    }

    .act-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2001;
        vvisibility: hidden;
        popacity: 0;
        transition: 200ms;
    }

    .act-modal.show {
        visibility: visible;
        opacity: 1;
    }

    .act-modal .act-modal-bg {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .act-modal .act-modal-pic {
        background: rgba(0, 0, 0, 0.25);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .act-modal .act-modal-close image {
        width: 50upx;
        height: 50upx;
        margin-top: 50upx;
    }

    .copy-info {
        display: inline-block;
        border-radius: 32upx;
        font-size: 12pt;
        color: #ff5c5c;
        width: 240upx;
        padding: 10upx 0upx;
        border: 1upx solid #ff5c5c;
    }

    .we-name {
        width: 580upx;
        font-size: 12pt;
        color: #353535;
        padding-bottom: 10upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
</style>